<template>
  <div class="add_hospital_page">

    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form ref="addForm" :model="addForm" class="add_form" :rules="addFormRules" size="small" :label-width="labelWidth" :disabled="status == 3">
        <el-form-item label="医生名称：" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="称号/职称：" prop="titleId">
          <!-- <el-input v-model="addForm.personalTitle"></el-input> -->
          <el-select v-model="addForm.titleId" class="a_input">
            <el-option v-for="(item, index) in doctorTitleList" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在城市：" prop="city">
          <!-- <el-input v-model="addForm.name"></el-input> -->
          <el-select v-model="addForm.city" filterable class="a_select" @change="getHospital">
            <el-option v-for="(item, index) in cityList" :key="index" :label="item.name" :value="item.code" />
          </el-select>
          <!-- <AreaSelect v-model="addForm.city" class="a_select"></AreaSelect> -->
        </el-form-item>
        <el-form-item label="所在医院：" prop="hospitalId">
          <!-- <el-input v-model="addForm.name"></el-input> -->
          <el-select v-model="addForm.hospitalId" filterable class="a_select">
            <el-option v-for="(item, index) in hospitalList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="addForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="从业年限：">
          <!-- <el-input v-model="addForm.workYears"></el-input> -->
          <div class="unit_box">
            <el-input-number v-model="addForm.workYears" :controls="false" class="number_input"></el-input-number>
            <span class="unit_tips">年</span>
          </div>
        </el-form-item>
        <el-form-item label="案例数：">
          <el-input v-model="addForm.caseCnt"></el-input>
        </el-form-item>
        <el-form-item label="擅长项目：">
          <!-- <el-input v-model="addForm.name"></el-input> -->
          <!-- <el-select v-model="addForm.expertProject" multiple class="a_select">
                          <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.id" />
                      </el-select> -->
          <ProjectSelect v-model="addForm.expertProject" class="a_select"></ProjectSelect>
        </el-form-item>
        <el-form-item label="是否开放预约：" prop="isOpened">
          <el-radio-group v-model="addForm.isOpened">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="医生图片：" class="long_form_item">
          <!-- <ImageUpload v-model="addForm.photo" tip="图片尺寸1:1,大小在1M以内"></ImageUpload> -->
          <CropperUpload v-model="addForm.photo"></CropperUpload>
        </el-form-item>
        <el-form-item label="医生海报：" class="long_form_item">
          <ImageUpload v-model="addForm.poster" tip="图片尺寸3:2,大小在2M以内"></ImageUpload>
        </el-form-item>
        <el-form-item label="详细介绍：" class="long_form_item">
          <WangEditor v-model="addForm.introduce"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveInfo('addForm')">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 第二步 医院资质 开始 -->
    <div class="content" v-show="step == 2">
      <el-form :model="addForm" class="" size="small" :label-width="labelWidth" :disabled="status == 3">
        <div class="license_box">
          <el-form-item label="关联医生资质：" class="el_form_item">
            <el-select v-model="addForm.qualificationId" filterable class="a_select" @change="getQualificationInfo">
              <el-option v-for="(item, index) in qualificationList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="医生职称：" class="el_form_item">
            <el-input v-model.trim="cerForm.practiceLicenseNumber" class="a_input"></el-input>
          </el-form-item>
        </div>

        <div class="license_box">
          <el-form-item label="医师执业证：" class="el_form_item">
            <ImageUpload class="license_upload" v-model="cerForm.practiceLicense" :disabled="isDisabled"></ImageUpload>
          </el-form-item>
          <div class="license_info">
            <el-form-item label="证书编码：">
              <el-input v-model.trim="cerForm.practiceLicenseNumber" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="医师级别：">
              <el-input v-model.trim="cerForm.practiceLicenseLevel" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="执业范围：">
              <el-input v-model.trim="cerForm.practiceBusinessScope" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="执业类型：">
              <el-input v-model.trim="cerForm.practiceBusinessClass" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="发证机关：">
              <el-input v-model.trim="cerForm.issuingAuthority" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="license_box">
          <el-form-item label="医师资格证：" class="el_form_item">
            <ImageUpload class="license_upload" v-model="cerForm.doctorCertificate" :disabled="isDisabled"></ImageUpload>
          </el-form-item>
          <div class="license_info">
            <el-form-item label="证件编号：">
              <el-input v-model.trim="cerForm.certificateNumber" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="是否换证：">
              <el-radio-group v-model="cerForm.certificateChanged" :disabled="isDisabled">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="从业年份：">
              <el-input v-model.trim="cerForm.employmentDuration" class="a_input" :disabled="isDisabled"></el-input>
            </el-form-item>
          </div>
        </div>

        <el-form-item label="">
          <el-button type="primary" @click="nextStep(3)">保存，下一步</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!-- 第二步 医院资质 end -->

    <!-- 第四步 平台运营 开始 -->
    <div class="content" v-show="step == 3 && hidden != false">
      <el-form ref="secondForm" :rules="secondFormRules" :model="addForm" class="" size="small" :label-width="labelWidth" :disabled="status == 3">
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页：" class="" prop="homePageShow">
          <el-radio-group v-model="addForm.homePageShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否认证：" class="" prop="hasCertified">
          <el-radio-group v-model="addForm.hasCertified">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示预约数：" class="" prop="initAppointmentCnt">
          <el-input v-model="addForm.initAppointmentCnt" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="展示评分：" class="" prop="initScore">
          <el-input v-model="addForm.initScore" max="5" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input type="textarea" v-model="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input type="textarea" v-model="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo('secondForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第四步 平台运营 end -->

</div>
</template>
<script>
import AreaSelect from "@/components/province";
import AddressMap from "@/components/map";
import ImageUpload from "@/components/upload/upload.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import ProjectSelect from "@/components/select/project";
import { GETHOSPITALOPTIONS } from "@/http/hospital";
import { GET_DOCTORTITLE_OPTIONS } from "@/http/configuration";
import {
  ADDDOCTORINFO,
  GETDOCTORINFO,
  EDITDOCTORINFO,
  BASEURL,
} from "@/http/doctor";
import {
  GET_QUALIFICATION_DOCTOR_OPTIONS,
  GET_QUALIFICATION_DOCTOR_INFO,
} from "@/http/information";
import { deepClone, showToast } from "@/common/util";
import { GETCITYOPTIONS } from "@/http/system";
import { ADD_DOCTOR_FIELD } from "@/common/constants";
import {IS_RATE_DECIMAL} from '@/common/validator'
import CropperUpload from '@/components/upload/cropperUpload.vue'
export default {
  components: {
    AreaSelect,
    AddressMap,
    ImageUpload,
    WangEditor,
    ProjectSelect,
    CropperUpload
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "医生资质", id: 2 },
        { name: "平台运营", id: 3 },
      ],
      step: 1,
      addForm: {},
      cerForm: {},
      labelWidth: "120px",
      addFormRules: {
        name: [{ required: true, message: "请输入医生名称", trigger: "blur" }],
        titleId: [
          { required: true, message: "请选择称号/职称", trigger: "change" },
        ],
        city: [
          { required: true, message: "请选择所在城市", trigger: "change" },
        ],
        hospitalId: [
          { required: true, message: "请选择医院", trigger: "change" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        isOpened: [
          { required: true, message: "请选择是否开放预约", trigger: "change" },
        ],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        initAppointmentCnt: [
          { required: true, message: "请输入展示预约数", trigger: "blur" },
        ],
        initScore: [
          { required: true, message: "请输入展示评分", trigger: "blur" },
          { validator: IS_RATE_DECIMAL, trigger: 'blur' }
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      hospitalList: [],
      loading: false,
      doctorTitleList: [],
      isDisabled: true,
      qualificationList: [],
      cityList: [],
      status: 1,
      isHidden:false
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }

    /**
     * 新增：status：1
     * 编辑：status：2
     * 详情：status：3
     */
    this.status = query.status || 1;
    this.isHidden = query.hidden;
    if (query.status == '3' && query.hidden == 'true') {
      this.menus = [
        { name: "基础信息", id: 1 },
        { name: "医生资质", id: 2 },
      ];
    }

    this.getHospital();
    this.getDoctorTitle();
    this.getQualification();
    this.getCity();
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      let _route = this.$route;
      let _path = '/doctor/all/list'
      console.log(_route)
      if(_route.path == '/doctor/add'){
        _path = '/doctor/list'
      }
      this.$router.push({
        path:_path
      })
    },

    // 下一步
    nextStep(num) {
      let step = this.step;
      let id = "addForm";
      if (step == 1) {
        this.$refs[id].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.step = num;
        });
        return false;
      }
      this.step = num;
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 医生图片
      if (o.photo && o.photo.length) {
        o.photo = o.photo.toString();
      }else{
        o.photo = ''
      }

      // 医生海报
      if (o.poster && o.poster.length) {
        o.poster = o.poster.toString();
      }else{
        o.poster = ''
      }

      // 城市
      if (o.city) {
        const m = this.cityList.find((k) => k.code == o.city);
        o.cityName = m ? m.name : "";
      }

      // 省市区
      // if (o.code && o.code.length) {
      //     o.province = o.code[0];
      //     o.city = o.code[1];
      //     o.district = o.code[2];
      //     delete o.code;
      // }
      return o;
    },

    // 保存数据
    saveInfo(id) {
      let _this = this;
      //let query = _this.$route.query;
      this.$refs[id].validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        let callBack = ADDDOCTORINFO;
        let msg = "新增成功";
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (oParams.id) {
          //oParams.id = query.id;
          callBack = EDITDOCTORINFO;
          msg = "编辑成功";
        }

        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            //_this.goBack();
            if (id == 'addForm') {
              _this.$set(_this.addForm, 'id', res.data.id)
              _this.step = 2;
            } else {
              _this.goBack();
            }
          }
        });
      });
    },

    // 获取所有医院
    getHospital(city) {
      const oParams = {};
      if (city) {
        oParams.city = city;
      }

      if (this.addForm.hospitalId) {
        delete this.addForm.hospitalId;
      }

      GETHOSPITALOPTIONS(oParams).then((res) => {
        this.hospitalList = res.data || [];
      });
    },

    // 获取医生职称
    getDoctorTitle() {
      GET_DOCTORTITLE_OPTIONS().then((res) => {
        this.doctorTitleList = res.data || [];
      });
    },

    // 获取医生资质
    getQualification() {
      GET_QUALIFICATION_DOCTOR_OPTIONS().then((res) => {
        this.qualificationList = res.data || [];
      });
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 获取医生资质详情
    getQualificationInfo(id) {
      GET_QUALIFICATION_DOCTOR_INFO({ id: id }).then((res) => {
        let obj = res.data || {};
        // 医生图片
        if (obj.photo) {
          obj.photo = obj.photo.split(",");
        }
        this.cerForm = res.data || {};
      });
    },

    // 获取医生详情
    async getInfo(id) {
      let res = await GETDOCTORINFO({ id: id });
      let obj = res.data || {};
      let list = ADD_DOCTOR_FIELD;
      let addForm = {};
      console.log(list);

      for (let k in obj) {
        let idx = list.findIndex((j) => j == k);
        if (idx >= 0) {
          addForm[k] = obj[k];
        }
      }

      // 医生图片
      if (addForm.photo) {
        addForm.photo = addForm.photo.split(",");
      }

      // 医生海报
      if (addForm.poster) {
        addForm.poster = addForm.poster.split(",");
      }

      if (addForm.qualificationId) {
        this.getQualificationInfo(addForm.qualificationId);
      }
      console.log(addForm.titleId);
      this.addForm = addForm;
    },
  },
};
</script>
<style lang="scss" scoped>@import "@/assets/style/addHospital.scss";</style>